<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
* {
	margin: 0;
	padding: 0;
}

.app {
	width:800px;
	height: 500px;
}

.portlet-default {
	padding: 20px;
}

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>
</head>
<body>
	<div id="app" class="app">
		<div class="portlet-heading portlet-default">
			<h4 class="modal-title text-dark" align="center">
				
			</h4>
			<hr class="border-t-a">
		

		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > 
  
		    <el-form-item label="客户名称：" label-width="100px" prop="custer">
				   <el-input v-model="ruleForm.custer" ></el-input>
			</el-form-item>
		    <el-form-item label="客户电话：" label-width="100px" prop="famoney">
					<el-input placeholder="" v-model="ruleForm.famoney"></el-input>
			</el-form-item>
			<el-form-item label="首次签约:" label-width="100px" >
			   <el-col :span="10">
					<el-form-item  prop="date1">
						<el-date-picker disabled type="date" plain placeholder="选择日期" v-model="ruleForm.date1"></el-date-picker>
				   </el-form-item>
			   </el-col>
			   <el-col :span="14">
					<el-form-item label="客户状态:" prop="state">
				        <el-select v-model="ruleForm.state" placeholder="" disabled>
						<el-option :key="1121" label="潜在客户"  :value="1121"></el-option>
						<el-option :key="1122"  label="签约客户" :value="1122"></el-option>
						<el-option :key="1123" label="重复购买" :value="1123"></el-option>
						<el-option :key="1124" label="失效" :value="1124"></el-option>
					    </el-select>
		            </el-form-item>
			   </el-col>
			</el-form-item>
			
			
			<el-form-item label="种类：" text-size="14px" >
					<el-col :span="10">
						<!--	<template>-->
						<el-form-item  prop="privoder">
						<el-select v-model="ruleForm.privoder" placeholder="请选择">
							<el-option :key="1111" label="客户" :value="1111"></el-option>
							<el-option :key="1112" label="供应商" :value="1112"></el-option>
							<el-option :key="1113" label="代理" :value="1113"></el-option>
							<el-option :key="1114" label="合作伙伴" :value="1114"></el-option>
							<el-option :key="1115" label="其他" :value="1115"></el-option>
						</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="14">
					  <el-form-item label="信用等级" prop="region" >
					    <el-select v-model="ruleForm.region" placeholder="未选">
						<el-option :key="1131" label="高" :value="1131"></el-option>
						<el-option :key="1132" label="中" :value="1132"></el-option>
						<el-option :key="1133" label="低" :value="1133"></el-option>
					    </el-select>
			          </el-form-item>
				    </el-col>
			</el-form-item>


           <el-form-item label="预估销量">
           <el-col :span="10">
		    <el-form-item  prop="regionxiao">
				    <el-select v-model="ruleForm.regionxiao" placeholder="请选择">
						<el-option :key="1141" label="1-5万" :value="1141"></el-option>
						<el-option :key="1142" label="5-50万" :value="1142"></el-option>
						<el-option :key="1143" label="50万以上" :value="1143"></el-option>
				</el-select>
		    </el-form-item>
		    </el-col>
		    <el-col :span="14">
		    <el-form-item label="客户定性：" label-width="100px" prop="dignxing">
				<el-select v-model="ruleForm.dignxing" placeholder="请选择">
						<el-option :key="1151" label="有价值" :value="1151"></el-option>
						<el-option :key="1152" label="价值" :value="1152"></el-option>
						<el-option :key="1153" label="不确定" :value="1153"></el-option>
				</el-select>
		    </el-form-item>
		    </el-col>
		    </el-form-item>
		    <el-form-item label="客户定级：" label-width="100px" >
		    	 <el-col :span="10">
		    	 	 <el-form-item  prop="dignji">
				<el-select v-model="ruleForm.dignji" placeholder="请选择">
						<el-option :key="1161" label="大单" :value="1161"></el-option>
						<el-option :key="1162" label="正常" :value="1162"></el-option>
						<el-option :key="1163" label="小单" :value="1163"></el-option>
				</el-select>
				 </el-form-item>
				 </el-col>
				  <el-col :span="14">
		    	 	 <el-form-item v-show="ruleForm.isHigh != 'qwer123xx' || ruleForm.isHigh == undefined " label="客户公海：" >
						<el-select v-model="ruleForm.high_name" placeholder="请选择" @change="handleSelect1">
						<el-option v-for="item in highs" :key="item.high_id" :label="item.high_name" :value="item.high_id">
						</el-select>
				 </el-form-item>
				</el-col>
			</el-form-item>
		    
		    <el-form-item label="客户地址：" label-width="100px" prop="cumeradiss">
				<el-input v-model="ruleForm.cumeradiss" ></el-input>
			</el-form-item>
		    <el-form-item label="备注:" prop="textarea4">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="ruleForm.textarea4">
					</el-input>
			</el-form-item>
		    
		    <el-form-item> 
		       <el-button @click="resetForm('ruleForm')">重置</el-button> 
		       <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> 
		    </el-form-item> 
		    <el-form-item ><el-upload
                 class="avatar-uploader"
                  action="/custormerfile"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                 <img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                </el-form-item>
	    </el-form>
	    </div>
	</div>
	<script >
			var vm = new Vue({
				el: ".demo-ruleForm",
				data() {
					return {
						highs:[],
						ruleForm: {
							namese: '',
							custer: '',
							famoney: '',
							date1: '',
							state:'',
							region: '',
							privoder:'',
							regionxiao:'',
							dignxing:'',
							dignji:'',
							cumeradiss:'',
							textarea4:'',
							cusid:'',
							imageUrl: '',
							src:'',
							imgsss:'',
							isHigh:'qwer123xx',
							high:''
						},
						//验证规则
						rules: { //数据源model
							custer: [{
								required: true,
								message: '请输入客户名称',
								trigger: 'blur'
							}],
							famoney: [{  required: true, message: '不能为空', trigger: 'blur' },
								{  min:11,max:11,message: '电话格式错误',  trigger: 'blur'},
								   {pattern: /^1[345678]\d{9}$/, message: '手机号格式错误'}],
							
							regionxiao: [{
								required: true,
								message: '请选择定量',
								trigger: 'blur'
							}],
							dignxing: [{
								required: true,
								message: '请选择定性',
								trigger: 'blur'
							}],
							
							dignji: [{
								required: true,
								message: '请选择定级',
								trigger: 'blur'
							}],
							
							
							region: [{
								required: true,
								message: '请选择客户客户信用等级',
								trigger: 'blur'
							}],
							privoder: [{
								required: true,
								message: '请输入客户种类',
								trigger: 'blur'
							}]
						}
					};
				},
				methods: {
					 handleAvatarSuccess(res, file) {
					       this.ruleForm.imageUrl = URL.createObjectURL(file.raw);
					      },
					      beforeAvatarUpload(file) {
					        const isLt2M = file.size / 1024 / 1024 < 2;
					        if (!isLt2M) {
					          this.$message.error('上传头像图片大小不能超过 2MB!');
					        }
					        return isLt2M;
					      },
					submitForm(formName) {
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								var ax = null;
								if (JSON.stringify(${up}) == '{}') {
									ax = "/addcustomer";
								}else{
								      ax = "/updatecustomer";
									
							  	 //alert(ax+"ssss");
								}
								
								//post提交数据
								axios.post(ax,
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})
									
								).then(function(v) {
									window.parent.location.replace("/customer");
								}).catch(function(e) {
									alert("出错了"+e);
								});

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					},
					resetForm(formName) { 
						this.$refs[formName].resetFields();
					},
					handleSelect: function(it) {
						console.log(it)
					},
					handleSelect1: function(it) {
						this.ruleForm.high = it;
						alert(this.ruleForm.high);

					},
				},

				 mounted() {
					if(JSON.stringify(${up}) != '{}'){
					var customer = ${up};
					this.ruleForm.cusid = customer.cus_id;
					this.ruleForm.namese = customer.cus_company;
					this.ruleForm.custer = customer.cus_name;
					this.ruleForm.famoney = customer.lin_phone;
					this.ruleForm.state= customer.cus_status;
					this.ruleForm.date1 = customer.cus_firstdate;
					this.ruleForm.region = customer.cus_credit;
					this.ruleForm.privoder = customer.cus_type;
					this.ruleForm.regionxiao = customer.node_ation;
					this.ruleForm.dignxing = customer.node_qualitative;					
					this.ruleForm.dignji = customer.node_score;
					this.ruleForm.textarea4 = customer.cus_remark;
					this.ruleForm.cumeradiss = customer.ad_address;
					console.log(customer);

			      } 
				
				
				if(JSON.stringify(${colle}) != '{}'){
					var colle = ${colle};
					
					this.ruleForm.famoney = colle.col_phone;
					this.ruleForm.custer = colle.col_linkman;
					this.ruleForm.namese = colle.col_company;
					this.ruleForm.isHigh =  colle.use_name;
					this.highs = ${highs};
					console.log(this.ruleForm.isHigh);
					
				}
				
				console.log(this.ruleForm.isHigh);

						
				}
				
			});
		</script>
</body>



</html>